<template>
  <div class="my_upload">
    <ul class="upload_list">
      <li class="upload_item" v-for="item in tiveList" :key="item.id">
        <div class="item_top">
          <span>{{item.create_at}}</span>
          <!-- 待处理 -->
          <img class="item_top_img" v-if="item.status == 1 && item.is_show == 0 " src="~assets/img/daichuli@2x.png" alt />
          <!-- 未采用 -->
          <img class="item_top_img" v-else-if="item.status == 0 && item.is_show == 0" src="~assets/img/weicaiyong.png" alt />
          <!-- 已采用 -->
          <img class="item_top_img" v-else-if="item.is_show == 1" src="~assets/img/caiyong@2x.png" alt="">
        </div>
        <p class="item_con">{{item.title}}</p>
        <img v-for="(v,i) in item.image" :key="i" class="item_foo_img" :src="v.image" alt />
      </li>
      <li v-show="noMoreData" class="noMoreData">没有更多数据了</li>
    </ul>
    <div class="upload_foo">
      <div class="upload_btn" @click="$router.push({path:'/interactive', query:{type:'hdcanyu'}})">
        <img src="~assets/img/submit@2x.png" alt />
        <span>互动参与</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getInteractiveList } from "../api/upload";
import { authLogin } from "../api/reporting";
import { throtTling } from "utils/throttling.js";
import { getScrollTop, getScrollHeight, getWindowHeight } from "utils/scroll";
export default {
  name: "MyUpload",
  data() {
    return {
      myType: "sjshangbao",
      tiveList: [],
      page: 1,
      limit: 6,
      // 没有更多数据
      noMoreData: false,
    };
  },
  mounted() {
    if (localStorage.getItem("openid")) {
      this.openid = localStorage.getItem("openid");
      this.myType = this.$route.query;
      // 获取互动参与列表
      this.getInteractiveList();
    }
    this.$nextTick(() => {
      window.addEventListener("scroll", this.menu);
    });
  },
  methods: {
    getInteractiveList() {
      getInteractiveList(this.openid, this.page, this.limit).then((res) => {
        if (res.code == 200) {
          this.tiveList.push(...res.data.data); 
          console.log(this.tiveList);
        } else {
          this.noMoreData = true; 
        }
      });
    },

    menu: throtTling(function () {
      if (!this.noMoreData) {
        // 此时还有剩余数据未加载完
        let scroll = getScrollTop() + getWindowHeight() - getScrollHeight();
        if (scroll > -400) {
          //400：距离底部多少像素开始触发
          this.page += 1;
          this.getInteractiveList();
        }
      }
    }, 600),
  },
  //离开删除绑定事件
  beforeDestroy() {
    this.page = 1;
    this.noMoreData = false
    window.removeEventListener("scroll", this.menu);
  },
};
</script>

<style lang="less" scoped>
.my_upload {
  margin-bottom: 60px;
}
.upload_list {
  .upload_item {
    padding: 20px 16px;
    height: 170px;
    border-bottom: 1px solid #ebebeb;
    .item_top {
      display: flex;
      justify-content: space-between;
      height: 38px;
      line-height: 38px;
      .item_top_img {
        width: 50px;
      }
    }
    .item_con {
      margin: 10px 0;
      font-size: 15px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .item_foo {
      height: 78px;
    }
    .item_foo_img {
      margin-right: 10px;
      width: 113px;
      height: 100px;
      border-radius: 5px;
    }
  }
}
.upload_foo {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: #2db88f;
  .upload_btn {
    img {
      margin-right: 20px;
      width: 30px;
      height: 30px;
    }
  }
}
.noMoreData {
  text-align: center;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
}
</style>